<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <div class="uifix-search-dialog">
        <el-input v-model="query.searchColumn" clearable prefix-icon="el-icon-search" size="small" placeholder="请输入内容" plain style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <span class="filter-item query-date">
          <el-date-picker
            v-model="query.startTime"
            type="date"
            placeholder="开始日期"
            value-format="yyyy-MM-dd"
            :picker-options="startTimePickOption"
          /> <span style="padding: 0 6px">~</span>
          <el-date-picker
            v-model="query.endTime"
            type="date"
            placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="endTimePickOption"
          />
        </span>
        <rrOperation :crud="crud" />
        <el-button v-if="!settings.hiddenExport" plain size="mini" class="filter-item" :loading="crud.downloadLoading" :disabled="!crud.data.length" @click="crud.doExport">导出</el-button>
      </div>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" stripe :data="crud.data" size="small" :max-height="600" @selection-change="crud.selectionChangeHandler">
        <el-table-column v-for="column in columns" :key="column.prop" :header-align="column.headerAlign" :prop="column.prop" :label="column.label" :width="column.width" :align="column.align" :formatter="column.formatter" /></el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import CRUD, { presenter, header, crud } from '@brotherCrud/crud'
import rrOperation from '@brotherCrud/RR.operation'
import pagination from '@brotherCrud/Pagination'
import logSettings, { COMPONENT_LOG, DRAWING_LOG, NODE_LOG } from '@/utils/log'
export default {
  name: 'StandardComponentLog',
  components: { pagination, rrOperation },
  mixins: [presenter(), header(), crud()],
  cruds() {
    return CRUD({
      title: '管理日志', url: 'api/standardComponentLog', idField: 'id',
      optShow: {
        download: true
      },
      ColumnsSelectedShow: false,
      page: {
        pageSize: 1
      }
    })
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    logType: {
      type: String,
      required: true,
      validator: function(value) {
        return [COMPONENT_LOG, DRAWING_LOG, NODE_LOG].includes(value)
      }
    }
  },
  data() {
    return {
      settings: { ...logSettings[this.logType] },
      startTimePickOption: {
        disabledDate: this.checkDate(true)
      },
      endTimePickOption: {
        disabledDate: this.checkDate(false)
      }
    }
  },
  computed: {
    columns() {
      return this.settings && Array.isArray(this.settings.columns) ? this.settings.columns : []
    }
  },
  beforeCreate() {

  },
  created() {
    this.initCrud()
  },
  methods: {
    checkDate(isStartDate) {
      if (isStartDate) {
        return (date) => {
          if (this.query.endTime) {
            const datetime = this.query.endTime + ' 00:00:00'
            return new Date(date) > new Date(datetime)
          }
          return false
        }
      } else {
        return (date) => {
          if (this.query.startTime) {
            const datetime = this.query.startTime + ' 00:00:00'
            return new Date(date) < new Date(datetime)
          }
          return false
        }
      }
    },
    initCrud() {
      // 根据不同类型，初始化crud的参数
      this.crud.url = this.settings['url']
      this.crud.title = this.title
      this.isConfigured = true
      this.crud.toQuery()
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      if (!this.isConfigured) {
        return false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.app-container{
  padding: 0;
  ::v-deep .el-table__body-wrapper{
    min-height: 320px;
  }
  .query-date{
    ::v-deep  .el-date-editor{
         width: 136px;
      }
  }
}
</style>
